<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	   <link rel="icon" href="../images/favicon.ico" type="image/x-icon" />y
    <style>
        	*{
			margin: 0;
			padding: 0;
		}
		#box{
			width: 350px;
			height: 350px;
			border: 1px solid #000;
			margin: 200px;
			position: relative;
		}
		#big{
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			overflow: hidden;
			position: absolute;
			top:0;
			left : 360px;
			display: none;
		}
		#mask{
			width: 175px;
			height: 175px;
			background: paleturquoise;
			position: absolute;
			left:0;
			top: 0;
			opacity: 0.3;
			display: none;
			cursor: move;
		}
		#small{
			position: relative;
		}
		#bigImg{
			position: absolute;
			left: 0;
			top: 0;
		}
    </style>
</head>
<body>
	<script src="../js/public.js"></script>
        <div id="box" >
                <div id="small"><!--小图区-->
                    <img src="../images/fadas.jpg" alt=""  style="width: 350px;height:350px;" />
                    <div id="mask"></div><!--遮罩层-->
                </div>
                <div id="big"><!--大图区-->
                    <img src="../images/fadab.jpg" alt="" id="bigImg"/>
                </div>
            </div>
        <script>
       	/*
	需求分析:
	1 鼠标移入small中,mask显示,big也显示
	2 鼠标移出small,mask隐藏,big隐藏
	3 mask可以移动,不能超出small,鼠标在mask中间
	4 当mask在small中移动,大图显示相应位置
	*/

	//获取相关元素
	var small = $id('small');//小图片所在的盒子
	var mask = $id('mask');//遮罩层
	var big = $id('big');//大图片所在的盒子
	var box = small.parentNode;//box盒子
	var bigImg = $id('bigImg');//大图
	//鼠标移入small中,mask显示,big也显示
	small.onmouseenter = function(){
		//mask显示,big也显示
		mask.style.display = "block";
		big.style.display = "block";
	}

	//鼠标移出small,mask隐藏,big隐藏
	small.onmouseleave = function(){
		//mask隐藏,big隐藏
		mask.style.display = "none";
		big.style.display = "none";
	}

	//mask可以移动
	small.onmousemove = function(e){
		//为了便于mask跟随鼠标定位,需要计算鼠标在small中的坐标
		var event = e || window.event;
		// var x = 鼠标距离页面左侧的距离(看的见的+看不见的) - small(box)距离页面左侧的距离
		
		//为了鼠标在mask中居中所以x,y都要减去mask的一半
		var x = event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft- box.offsetLeft-mask.offsetWidth/2;
		var y = event.clientY+document.documentElement.scrollTop+document.body.scrollTop - box.offsetTop-mask.offsetHeight/2;
		
		//边界检测
		if(x<0){
			x = 0;
		}
		if(x>small.offsetWidth-mask.offsetWidth){
			x = small.offsetWidth-mask.offsetWidth;
		}
		if(y<0){
			y = 0;
		}
		if(y>small.offsetHeight - mask.offsetHeight){
			y = small.offsetHeight - mask.offsetHeight;
		}
		//定位mask
		mask.style.left = x+"px";
		mask.style.top = y+"px";

		// 当mask在small中移动,大图显示相应位置
		//x/small.offsetWidth = 大图片要偏移的距离/大图的宽度
		var left = x/small.offsetWidth*bigImg.offsetWidth;
		//y/small.offsetHeight = 大图片要偏移的距离/大图的高度
		var top = y/small.offsetHeight*bigImg.offsetHeight;
		bigImg.style.left = -left+"px";
		bigImg.style.top = -top+"px";

	}
        </script>
</body>
</html>